@media (min-width: 992px) {
    .w-lg-50 {
        width: 50%;
    }
}

.color-cube {
    width        : 1.5rem;
    height       : 1.5rem;
    color        : #fff;
    box-shadow   : rgb(30 41 59 / 4%) 0 2px 4px 0;
    border       : 1px solid rgba(98, 105, 118, .16);
    border-radius: 3px;
}

.color-input {
    position    : relative;
    display     : inline-block;
    margin      : 0;
    line-height : 1;
    cursor      : pointer;
    margin-right: .25em;
}

.color-input:last-child {
    margin-right: 0;
}

.color-check-input {
    position: absolute;
    z-index : -1;
    opacity : 0;
}

.color-check-color {
    display      : block;
    width        : 1.5rem;
    height       : 1.5rem;
    color        : #fff;
    box-shadow   : rgb(30 41 59 / 4%) 0 2px 4px 0;
    border       : 1px solid rgba(98, 105, 118, .16);
    border-radius: 3px;
}

.color-check-color:before {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    content         : "";
    background      : no-repeat center center/1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
    opacity         : 0;
    transition      : opacity .3s;
}

.color-check-input:checked~.color-check-color:before {
    opacity: 1;
}

.cursor-pointer {
    cursor: pointer;
}

.fs-sm {
    font-size: 14px;
}

.bg-panel {
    background-color: #F5F5F5;
}

.bg-toast-info {
    color           : #084298;
    background-color: #cfe2ff;
}

.bg-toast-warning {
    color           : #664d03;
    background-color: #fff3cd;
}

.bg-toast-success {
    color           : #0f5132;
    background-color: #d1e7dd;
}

.bg-toast-danger {
    color           : #842029;
    background-color: #f8d7da;
}

.panel {
    border-radius   : 0.375rem;
    background-color: #F6F6F6;
    box-shadow      : rgb(30 41 59 / 4%) 0 2px 4px 0;
    border          : 1px solid rgba(98, 105, 118, .16);
}

.statistic {
    padding         : 16px;
    min-width       : 180px;
    background-color: #F6F6F6;
    box-shadow      : rgb(30 41 59 / 4%) 0 2px 4px 0;
    border          : 1px solid rgba(98, 105, 118, .16);
    display         : flex;
    flex-direction  : column;
}

.statistic-narrow {
    padding         : 16px;
    min-width       : 180px;
    background-color: #F6F6F6;
    box-shadow      : rgb(30 41 59 / 4%) 0 2px 4px 0;
    border          : 1px solid rgba(98, 105, 118, .16);
    display         : flex;
    flex-direction  : row;
    align-items     : baseline;
}

.img-lg-preview {
    margin     : 8px;
    width      : 96px;
    height     : 96px;
    border     : 1px solid rgba(98, 105, 118, .16);
    display    : flex;
    align-items: center;
    cursor     : pointer;
}

.img-preview {
    margin     : 8px;
    width      : 48px;
    height     : 48px;
    border     : 1px solid rgba(98, 105, 118, .16);
    display    : flex;
    align-items: center;
    cursor     : pointer;
}

.btn-mini {
    height       : 2em;
    font-size    : 0.75rem;
    padding-left : 0.75em;
    padding-right: 0.75em;
    white-space  : nowrap;
}

.btn-action {
    width : 38px;
    height: 38px;
}

.activity-icon {
    width  : 38px;
    height : 38px;
    padding: 3px;
}

.activity-icon-sm {
    width : 24px;
    height: 24px;
}

.tags {
    align-items    : center;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-start;
}

.tags .tag {
    margin-bottom: 0.5rem;
    cursor       : pointer;
}

.tags .tag:not(:last-child) {
    margin-right: 0.25rem;
}

.tags:last-child {
    margin-bottom: -0.5rem;
}

.tags:not(:last-child) {
    margin-bottom: 1rem;
}

.tag:not(body) {
    align-items     : center;
    background-color: whitesmoke;
    border-radius   : 0.375rem;
    color           : #4a4a4a;
    display         : inline-flex;
    font-size       : 0.75rem;
    height          : 2em;
    justify-content : center;
    line-height     : 1.5;
    padding-left    : 0.75em;
    padding-right   : 0.75em;
    white-space     : nowrap;
}

.tag:not(body).tag-dark {
    background-color: #212529;
    color           : white;
}

.tag:not(body).tag-secondary {
    background-color: #6C757D;
    color           : white;
}

.tag:not(body) .delete {
    margin-left : 0.25rem;
    margin-right: -0.125rem;
}

.btn-close-sm {
    width : 6px;
    height: 6px;
}

.progress-fat {
    height: 40px;
}

.side-menu {
    font-size: 16px;
}

.side-menu-label {
    color      : #212529C0;
    font-weight: 600;
    font-size  : 16px;
}

.side-menu-label:not(:last-child) {
    margin-bottom: 8px;
}

.side-menu-label:not(:first-child) {
    margin-top: 8px;
}

.side-menu-list {
    line-height: 1;
    list-style : none;
    margin     : 0;
    padding    : 0;
}

.side-menu-list a {
    border-radius  : 4px;
    color          : #4a4a4a;
    display        : block;
    padding        : 12px;
    margin         : 2px;
    text-decoration: none;
    cursor         : pointer;
}

.side-menu-list a:hover {
    background-color: #e9ecef;
    color           : #363636;
}

.side-menu-list a.active {
    background-color: #212529;
    color           : #fff;
    cursor          : unset;
}

.input-short {
    width: 68px;
}

/* override bs modal */
.modal {
    --bs-modal-width: 540px;
}